<!-- 招聘分析 -->
<template>
  <div class="recruitAnalysis">
    <van-nav-bar title="招聘分析" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div id="chart1" class="charts"></div>
    <div id="chart2" class="charts"></div>
    <div id="chart3" class="charts"></div>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import * as echarts from "echarts"; //引入图表库
export default {
  name: "",
  setup() {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const data = reactive({
      dataset: {
        dimensions: ["department", "2016", "2017", "2018"],
        source: [],
      },
      dataList2: [],
      dataset2: {
        dimensions: ["department", "m", "f"],
        source: [],
      },
    });
    onBeforeMount(() => {});
    const echartInit = () => {
      //图1
      var myChart1 = echarts.init(document.getElementById("chart1"));
      //图2
      var myChart2 = echarts.init(document.getElementById("chart2"));
      var myChart3 = echarts.init(document.getElementById("chart3"));
      let option1 = {
        title: {
          text: "近三年部门人数",
          left: "center",
          top: "3%",
          textStyle: {
            // color: "#485187",
            fontSize: "14",
          },
        },
        legend: {
          orient: "vertical",
          left: "right",
        },
        tooltip: { trigger: "item" },
        dataset: data.dataset,
        xAxis: {
          type: "category",
          axisLabel: {
            interval: 0, //横轴信息全部显示
            rotate: 45, //60度角倾斜显示
          },
          name: "部门",
        },
        yAxis: { name: "人数" },
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
      };
      let option2 = {
        title: {
          text: "招聘渠道",
          left: "center",
          top: "3%",
          textStyle: {
            // color: "#485187",
            fontSize: "14",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          type: "scroll",
          bottom: 0,
        },
        series: [
          {
            name: "招聘渠道",
            type: "pie",
            radius: "50%",
            data: data.dataList2,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      let option3 = {
        title: {
          text: "部门在职性别分析",
          left: "center",
          top: "3%",
          textStyle: {
            // color: "#485187",
            fontSize: "14",
          },
        },
        legend: {
          orient: "vertical",
          left: "right",
        },
        tooltip: {},
        dataset: data.dataset2,
        xAxis: {
          type: "category",
          axisLabel: {
            interval: 0, //横轴信息全部显示
            rotate: 45, //60度角倾斜显示
          },
          name: "部门",
        },
        yAxis: { name: "人数" },
        series: [{ type: "bar" }, { type: "bar" }],
      };
      // 使用刚指定的配置项和数据显示图表。
      // option1.series.data = JSON.parse(JSON.stringify());
      myChart1.setOption(option1);
      // option2.series.data = data.optionData2;
      myChart2.setOption(option2);
      myChart3.setOption(option3);
    };
    onMounted(() => {
      dataInit();
    });
    const refData = toRefs(data);
    //返回按钮
    const onClickLeft = () => {
      router.push({ path: "/analysis" });
    };
    //请求数据
    const dataInit = () => {
      let arrProm = [
        proxy.$api.getRecruitNumber(),
        proxy.$api.getRecruitSource(),
        proxy.$api.getRecruitSex(),
      ];
      Promise.all(arrProm)
        .then((arr) => {
          console.log("接口返回", arr);
          data.dataset.source = dealProData(arr[0].obj);
          data.dataList2 = arr[1].obj;
          data.dataset2.source = arr[2].obj;
          echartInit();
        })
        .catch((e) => {
          proxy.$Toast.fail("错误:" + e);
        });
    };
    //处理月份属性
    const dealProData = (arr) => {
      let res = [];
      arr.forEach((e) => {
        res.push({
          department: e.department,
          2016: e.year1,
          2017: e.year2,
          2018: e.year3,
        });
      });
      return res;
    };
    return {
      ...refData,
      onClickLeft,
      echartInit,
      dataInit,
      dealProData,
    };
  },
};
</script>
<style scoped lang="scss">
.recruitAnalysis {
  background-color: #f5f4f9;
  #chart2 {
    height: 300px;
  }
}
</style>
